<template>
    <div>
        <a-card class="px2">
            <a-row>
                <a-col :span="4" style="text-align:center">
                    <img class="avatar" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.dongqiudi.com%2Fuploads%2Favatar%2F2016%2F03%2F13%2F7UtAATt4HB_thumb_1457841251601.jpg&refer=http%3A%2F%2Fimg.dongqiudi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626103349&t=13481498bc567fe521aa0373ce2074b9">
                </a-col>
                <a-col :span="8">
                    <p class="mb1"><span>登录账号：</span>15827623742</p>
                    <p class="mb1"><span>账号ID：</span>1324093129312216</p>
                    <p class="mb1"><span>最后登录时间：</span>2021-06-20 10:34:52</p>
                </a-col>
                <a-col :span="8">
                    <p class="mb1"><span>真实名称：</span>何文飞</p>
                    <p class="mb1"><span>注册时间：</span>2021-06-10 12:23:54</p>
                </a-col>
            </a-row>
        </a-card>
        <a-card class="mt1">
            <h2 class="f5 mb0">编辑信息</h2>
            <a-divider class="mx2" />
            <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="{span: 2}"
                :wrapper-col="{span: 10}"
            >
                <a-form-item ref="name" label="姓名" name="name">
                    <a-input v-model:value="formState.name" />
                </a-form-item>
                <a-form-item label="性别" name="sex">
                    <a-radio-group v-model:value="formState.sex">
                        <a-radio-button :value="0">男</a-radio-button>
                        <a-radio-button :value="1">女</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="生日" required name="birthday">
                    <a-date-picker
                        v-model:value="formState.birthday"
                        show-time
                        type="date"
                        placeholder="请选择生日"
                        style="width: 100%"
                    />
                </a-form-item>
                <a-form-item ref="phone" label="手机(账号)" name="phone">
                    <a-input v-model:value="formState.phone" />
                </a-form-item>
                <a-form-item ref="password" label="密码" name="password">
                    <a-input-password v-model:value="formState.password" />
                </a-form-item>
                <a-form-item ref="prepassword" label="确认密码" name="prepassword">
                    <a-input-password v-model:value="formState.prepassword" />
                </a-form-item>
                <a-form-item ref="email" label="邮箱" name="email">
                    <a-input v-model:value="formState.email" />
                </a-form-item>
                <a-form-item ref="desc" label="描述信息" name="desc">
                    <a-textarea v-model:value="formState.desc" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">Create</a-button>
                    <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>
<script lang='ts'>
import { defineComponent,ref,reactive,toRefs,UnwrapRef} from 'vue'
interface FormState {
    name:string,
    sex:number,
    birthday:string,
    phone:string,
    password:string,
    prepassword:string,
    email:string,
    desc:string,
}
export default defineComponent({
    name: '',
    setup(props,context) {
        const formRef=ref()
        const formState:UnwrapRef<FormState>=reactive({
            name:'',
            sex:0,
            birthday:"",
            phone:"",
            password:"",
            prepassword:"",
            email:"",
            desc:""
        })
       
        const rules = {
            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
            birthday: [{ required: true, message: '请选择生日', trigger: 'change' }],
            phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
            password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            prepassword: [{ required: true, message: '再次输入密码', trigger: 'blur' }],
            email: [{ required: true, message: '再次输入邮箱', trigger: 'blur' }],
        };

        return {
            formRef,
            formState,
            rules
        }
   }
});
</script>
<style lang='scss' scoped>
    .avatar{width:100px;height: 100px;border-radius: 50%;}
</style>